<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.Date"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctx" scope="page" value="${request.contextPath}"/>
<!DOCTYPE >
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <title>报修</title>
    <link rel="stylesheet" type="text/css" href="${ctx}/static/css/repair.css"/>
    <link rel="stylesheet" type="text/css" href="${ctx}/static/weui/1.1.2/weui-for-work.min.css?version=0.1"/>
    <script type="text/javascript" src="${ctx}/static/jquery/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="${ctx}/static/weui/1.1.2/weui.min.js"></script>
    <!-- 企业微信的JS-SDK -->
    <script type="text/javascript" src="${ctx}/static/weui/js/jweixin-1.2.0.js"></script>
    <script type="text/javascript" src="${ctx}/static/weixin/wx_common.js"></script>
    <script type="text/javascript" src="${ctx}/static/agent/floorInfo.js?v=<%=new Date().getTime() %>"></script>
</head>
<body>

<div id="toast" style="display: none;">
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast">
        <i class="weui-icon-warn weui-icon_toast"></i>
        <p class="weui-toast__content"></p>
    </div>
</div>
<div id="toast_success" style="display: none;">
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast">
        <i class="weui-icon-success-no-circle weui-icon_toast"></i>
        <p class="weui-toast__content"></p>
    </div>
</div>
    <form id = "repaireForm" class="repair-form" action="${ctx}/weixin/repairInfo" method="post" enctype="multipart/form-data" style="height: 92%;">
        <input type="hidden" name="userId" id="userId" value="${userId}" />
        <input type="hidden" name="token" id="token" value="${token}" />
        <input type="hidden" name="currentId" id="currentId"  value="${engineerId}" />
        <input type="hidden" name="machineType" id="machineType"  />
        <input type="hidden" name="repaireSubject" id="repaireSubject"  />
        <input type="file" hidden capture="camera" accept="image/*,video/*" id="file" name="file" value=""/>
        <div class="control-select">
            <a class="control-tabel" href="javascript:0">
                报修地址
            </a>
            <a class="control-context" href="javascript:showAddress()">
                请选择
            </a>
            <img class="control-arrow" src="${ctx}/static/images/right.png">
        </div>

        <%--<div class="divider"></div>--%>
        <div class="sortNav" id="sortNav">
            <c:forEach items="${picWords}" var="picWord" varStatus="st">
            <a href="javascript:0" id="select${picWord.id}" onclick="changePicWords(${picWord.id},${picWord.pagePosition})">
                <c:out value="${picWord.words}"/>
            </a>
            </c:forEach>
        </div>
        <div class="sortContent line">
            <!--产品列表-->
            <ol class="list-content" id="normal">
            </ol>
        </div>
        <textarea class="weui-textarea" name="description" placeholder="备注" rows="3"></textarea>
        <div class="weui-btn-area">
            <a class="weui-btn1 weui-btn_primary" href="#" onclick="javascript:submitRepaireInfo()" id="showTooltips">确定</a>
        </div>
        <div class="address-select" hidden>
            <div class="select-background">
                <div class="select-calss-a">
                    <span class="select-tabel">地址</span>
                    <span id="calssAValue" class="select-value" onclick="showSelect();">请选择</span>
                    <img src="/static/timg.jpeg">
                    <div class="select-option-div" id="addressSelect" hidden>
                        <span class="select-option" lang="">请选择</span>
                        <span class="select-option" lang="01">兆丰</span>
                        <span class="select-option" lang="02">科汇</span>
                        <span class="select-option" lang="03">百丽</span>
                        <span class="select-option" lang="04">其他</span>
                    </div>
                    <input hidden name="address"/>
                </div>
                <div class="select-two-level">
                    <span class="select-tabel">楼层</span>
                    <span id="twoLevelValue" class="select-value" onclick="showFloor()">请选择</span>
                    <img src="/static/timg.jpeg">
                    <div class="select-option-div1" hidden>
                    </div>
                    <input hidden name="floor"/>
                </div>
                <%--<select name="address" onchange="selectfloor();">--%>
                    <%--<option value="">请选择</option>--%>
                    <%--<option value="01">兆丰</option>--%>
                    <%--<option value="02">科汇</option>--%>
                    <%--<option value="03">百丽</option>--%>
                    <%--<option value="05">杨浦</option>--%>
                    <%--<option value="04">其他</option>--%>
                <%--</select>--%>
                <%--<select name="floor" style="display: none" >--%>
                <%--</select>--%>
            </div>
            <a href="javascript:define()" class="address-define">确定</a>
        </div>
    </form>
    <div class="weui-tabbar">
        <a href="#"  onclick="scanQRCode();" class="weui-tabbar__item weui-bar__item_on">
            <%--<img src="${ctx}/static/images/icon_tabbar.png"--%>
                 <%--alt="" class="weui-tabbar__icon">--%>
            <p class="weui-tabbar__label">扫一扫</p>
        </a>
        <a href="/weixin/to_repair?code=&amp;state=list" class="weui-tabbar__item ">
            <%--<img src="${ctx}/static/images/icon_tabbar.png"--%>
                 <%--alt="" class="weui-tabbar__icon">--%>
            <p class="weui-tabbar__label">记录</p>
        </a>
        <a href="/weixin/to_repair?code=&amp;state=knowledge" class="weui-tabbar__item">
            <%--<img src="${ctx}/static/images/icon_tabbar.png"--%>
                 <%--alt="" class="weui-tabbar__icon">--%>
            <p class="weui-tabbar__label">知识库</p>
        </a>
    </div>

    <script type="text/javascript">
        function showSelect(){
            $(".select-option-div").toggle();
            $("#addressSelect").find(".select-option").click(function () {
                $(".select-option-div").hide();
                var address = $(this).attr("lang")
                $("[name=address]").val(address);
                $("#calssAValue").html($(this).html());
                var floors = floor_json[address];
                var floorHtml = "";
                $.each(floors,function (i,v) {
                    if(/^\d+$/.test(v))
                        floorHtml += "<span class='select-option' onclick='selectFloor(this)' lang='"+v+"'>"+v+"楼</span>";
                    else
                        floorHtml += "<span class='select-option' onclick='selectFloor(this)' lang='"+v+"'>"+v+"</span>";
                    if(i == 0){
                        $(".select-option-div1").html(floorHtml);
                        $(".select-option-div1").find(".select-option").click();
                    }
                })
                $(".select-option-div1").html(floorHtml);
                $(".select-option-div1").hide();
            })
        }
        function showFloor() {
            $(".select-option-div1").toggle();
            $(".select-option-div").hide();
        }
        function selectFloor(t) {
            $("[name=floor]").val($(t).attr("lang"));
            $("#twoLevelValue").html($(t).html());
            $(".select-option-div1").hide();
        }
        getToken(); // 初始化js sdk
        function define(){
//            var address = $("select[name=address] option:selected").text();
//            var floor = $("select[name=floor] option:selected").text();
            var address = $("#calssAValue").html();
            var floorVal = $("[name=floor]").val();
            var floor = $("#twoLevelValue").html();
            if(""==floorVal){
                showErrorToast("请选择二级地址");
            }
            var showAddress = address+"&nbsp&nbsp&nbsp&nbsp"+floor;
            $(".control-context").html(showAddress);
            $(".address-select").hide();
        }
        function showAddress(){
            $(".address-select").show();
            showSelect();
            $("#addressSelect").find(".select-option").each(function (i,v) {
                if(i == 0){
                    $(v).click();
                }
            })
        }
        function forward(id) {
            location.href = "${ctx}/weixin/to_repair?code=&state=knowledge&condition=" + $('#searchInput').val();
        }
        // 扫一扫
        function scanQRCode() {
            wx.scanQRCode({
                desc: 'scanQRCode desc',
                needResult: 1, // 默认为0，扫描结果由企业微信处理，1则直接返回扫描结果，
                scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是条形码（一维码），默认二者都有
                success: function(res) {
                    var currentId = res.resultStr.split("=")[1];
                    $('#currentId').val(currentId);
                    showSuccessToast('扫描成功，欢迎使用自助报修');
                },
                error: function(res) {
                    if (res.errMsg.indexOf('function_not_exist') > 0) {
                        alert('版本过低请升级')
                    }
                }
            });
        }

        function  showSuccessToast(msg) {
            var $toast = $('#toast_success');
            if ($toast.css('display') != 'none') return;
            $toast.find('p').html(null);
            $toast.find('p').html(msg);
            $toast.fadeIn(100);
            setTimeout(function () {
                $toast.fadeOut(200);
            }, 2000);
        }
        function  showErrorToast(errMsg) {
            var $toast = $('#toast');
            if ($toast.css('display') != 'none') return;
            $toast.find('p').html(null);
            $toast.find('p').html(errMsg);
            $toast.fadeIn(100);
            setTimeout(function () {
                $toast.fadeOut(100);
            }, 2000);
        }
//        selectfloor();
//        //  选择楼层
//        function selectfloor() {
//            var _address = $("select[name=address]").val();
//            var $floor = $("select[name=floor]");
//            $floor.empty();
//            var floors = floor_json[_address];
//            var floor_html = "";
//            $.each(floors, function (i, v) {
//                floor_html += "<option value='" + v + "'>" + v + "</option>";
//            });
//            $floor.html(floor_html);
//            $floor.attr("style", "display:inline");
//        }
        // /weixin/to_repair?code=&state=knowledge

        function changePicWords(picId, pagePosition) {
            $("#machineType").val(picId);
            $("#sortNav").find("a").removeClass("select");
            $("#select"+picId).addClass("select");
            $("#img" + picId).attr("style", "background:-webkit-linear-gradient(left, white, red)");
            $.ajax({
                url: "${ctx}/weixin/picWord/normalPicWords",
                data: {code: '1', parentPosition: pagePosition},
                dataType: "json",
                type: "post",
                success: function (result) {
                    if (result.code == '0') {
                        var normals = result.data;
                        var htmlStr = "";
                        if(normals.length>=5) {
                            $.each(normals, function (index, picWord) {
                                htmlStr += "<li class=\"line\" onclick=\"javascript:addValue(" + picWord.id + ",'" + picWord.words + "')\">";
                                htmlStr += "<div><img id=\"img" + picWord.id + "\"  src=\"/weixin/picWord/download/" + picWord.id + "\" alt=\"\">";
                                htmlStr += "<span class=\"line-text\">" + picWord.words + "</span></div></li>";
                            });
                        }else{
                            $.each(normals, function (index, picWord) {
                                htmlStr += "<li class=\"line-width-90\" onclick=\"javascript:addValue(" + picWord.id + ",'" + picWord.words + "')\">";
                                htmlStr += "<div><img id=\"img" + picWord.id + "\"  src=\"/weixin/picWord/download/" + picWord.id + "\" alt=\"\">";
                                htmlStr += "<span class=\"line-text\">" + picWord.words + "</span></div></li>";
                            });
                        }
                        $("#normal").empty();
                        $("#normal").html(htmlStr);
                    } else {
                        showErrorToast(result.msg);
                    }
                }
            });
        }
        var txshow;
        function addValue(id, words) {
//            $("#normal").find("img").parent().removeAttr("style");
//            $("#img" + id).parent().attr("style", "background:-webkit-linear-gradient(left, white, red)");
            $("#normal").find("img").parent().parent().attr("style", "border-bottom: solid #fbfbfb;");
            $("#img" + id).parent().parent().attr("style", "border-bottom: solid #f4db25;");
            $("#repaireSubject").val(id);
            if (id == '14') {
                showErrorToast("新员工如需开通网盘使用权限，请先联系秘书小姐姐哦。其他事宜，请继续提交服务申请");
            }
            if (words == '拍照') {
                chooseImage();
                txshow = document.getElementById("img" + id);
                document.getElementById("file").addEventListener('change', readFile, false);
            }
        }
        function readFile() {
            var file = this.files[0];
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                txshow.src = this.result;
            }
        }

        function showErrorToast(errMsg) {
            var $toast = $('#toast');
            if ($toast.css('display') != 'none') return;
            $toast.find('p').html(null);
            $toast.find('p').html(errMsg);
            $toast.fadeIn(100);
            setTimeout(function () {
                $toast.fadeOut(100);
            }, 2000);
        }
        function changeSubject() {
            var _machineType = $("#machineType").val();
            $.each(repaireSubject, function (name, value) {
                if (_machineType == name) {
                    var htmlStr = "";
                    $.each(value, function (index, text) {
                        htmlStr += "<option value='" + text + "'>" + text + "</option>";
                    });
                    $("#repaireSubject").empty();
                    $("#repaireSubject").html(htmlStr);
                    return false;
                }
            })
        }
        var checkSubmitFlg = true;
        function submitRepaireInfo() {

            weui.form.validate('#repaireForm', function (error) {
                if (!error) {
                    var address_val = $("input[name='address']").val();
                    if(address_val==null || address_val==""){
                     showErrorToast("地址不能为空");
                     return;
                     }
                    if ($(":input[name='machineType']").val() == '') {
                        showErrorToast("选项不能为空");
                        return;
                    }
                    if (checkSubmitFlg == true) {
                        document.getElementById("repaireForm").submit();
                        checkSubmitFlg = false;

                    }

                    /*  var loading = weui.loading('提交中...');
                     setTimeout(function () {
                     loading.hide();
                     weui.toast('提交成功', 3000);
                     }, 1500);*/
                }
                // return true; // 当return true时，不会显示错误
            }, {
                regexp: {
                    IDNUM: /(?:^\d{15}$)|(?:^\d{18}$)|^\d{17}[\dXx]$/,
                    VCODE: /^.{4}$/
                }
            });
        }
        //初始化方法
        function init() {
            var userId = "${ userId }";
            $("#userId").val(userId);
//        console.info("userId is "+userId )
//        getToken();
            //BINDCLICK();
        }
        function chooseImage() {
            $("#file").click();
            /*wx.chooseImage({
             count: 1, // 默认9
             sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
             sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
             defaultCameraMode: "batch", //表示进入拍照界面的默认模式，目前有normal与batch两种选择，normal表示普通单拍模式，batch表示连拍模式，不传该参数则为normal模式。（注：用户进入拍照界面仍然可自由切换两种模式）
             isSaveToAlbum: 1, //整型值，0表示拍照时不保存到系统相册，1表示自动保存，默认值是1
             success: function (res) {
             //                alert(res);
             var localIds = res.localIds; // 返回选定照片的本地ID列表，
             // andriod中localId可以作为img标签的src属性显示图片；
             // iOS应当使用 getLocalImgData 获取图片base64数据，从而用于img标签的显示（在img标签内使用 wx.chooseImage 的 localid 显示可能会不成功）
             }
             });*/
        }

        //init();
    </script>
</body>
</html>
